<template>
    <!-- html -->
    <div class="Count">
        <h2>当前求和为：{{ sum }}</h2>
        <h2>当前学校为：{{ school }}</h2>
        <h2>当前地址为：{{ address }}</h2>
        <h2>当前地址为：{{ upperSchool }}</h2>
        <h2>当前地址为：{{ bigSum }}</h2>
        <select v-model.number="n"> v-model.number 将输入的数据和收集到数据尽可能转化为数字
            <!-- <option :value="1">1</option>  :vlaue 字符串1 转化为 数字 1 -->
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select> 
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Count'>
import { ref, toRefs } from 'vue'
import { useCountStore } from '@/store/count'
import Tores from '../Tores.vue'
import { storeToRefs } from 'pinia'

const countStore = useCountStore()
// console.log(countStore.sum)

// const { sum, school, address } = toRefs(countStore)

//storeToRefs只会关注store中的数据，不会对方法进行ref包裹
const { sum, school, address, bigSum, upperSchool } = storeToRefs(countStore)
// console.log(storeToRefs(countStore))

// let sum = ref(1)
let n = ref(1)

function add() {
    // sum.value += n.value
    //第一种修改方式
    // countStore.sum += n.value
    // countStore.school = "黑马"
    // countStore.address = "杭州"

    //第二种写法
    // countStore.$patch({
    //     sum: 88,
    //     school: "xxx",
    //     address: "xxx"
    // })

    //第三种方法
    countStore.increment(n.value)
}

function minus() {
    // sum.value -= n.value
    countStore.sum -= n.value
}

</script>

<style scoped>
/* 样式 */
.Count {
    background-color: orange;
    border-radius: 10px;
    padding: 20px;
}
</style>